﻿<!DOCTYPE html>
@{
    Layout = null;
}
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <script src="~/layui/layui.js"></script>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>

        body {
            background-image: url('https://img.zcool.cn/community/01890356dcf37e32f875520f73ee7e.gif');
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .layui-card {
            border: 2px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            padding: 60px;
            margin: 100px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .textbox {
            border: 2px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            background-color: rgba(255, 255, 255, 0.5);
            padding: 10px;
        }

        .code-container {
            padding: 5px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .code {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <form class="layui-form">
            <div style="margin-left:70px;font-size:20px">智慧酒店管理平台</div>
            <br />
            <div class="demo-login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input textbox" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="pwd" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input textbox" lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode "></i>
                                </div>
                                <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input textbox" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <div class="code-container">
                                    <p class="code"  id="randomCode"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" lay-filter="myCheckbox" name="remeber" title="记住密码" />
                    @* <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a> *@
                </div>
                <div class="layui-form-item" style="padding-left:150px">
                    <button style="margin:auto;" type="submit" class="layui-btn" lay-submit lay-filter="demo-login">登录</button>
                </div>
          @*       <div class="layui-form-item demo-login-other">
                    <label>社交账号登录</label>
                    <span style="padding: 0 21px 0 6px;">
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                    </span>
                    或 <a href="#reg">注册帐号</a>
                </div> *@
            </div>
        </form>
    </div>


    <script>
        layui.use(['form', 'laydate', 'util', 'jquery'], function () {

            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var util = layui.util;
            var $ = layui.jquery;
         
            //获取用户名密码
            var username = sessionStorage.getItem('username')
            var pwd = sessionStorage.getItem('pwd')
            //不为空反填用户名密码
            if (username != "" && pwd != "") {
                //反填密码
                $("[name=username]").val(username)
                $("[name=pwd]").val(pwd)
            }
            // 显示填写结果，仅作演示用
            function generateRandomCode() {
                let code = '';
                const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
                for (let i = 0; i < 4; i++) {
                    code += characters.charAt(Math.floor(Math.random() * characters.length));
                }
                //将生成的验证码返回给generateRandomCode()
                return code;
            }
            //首次加载刷新雅正吗
            document.getElementById('randomCode').innerHTML = generateRandomCode();
            //点击事件刷新
            document.getElementById('randomCode').addEventListener('click', function () {
                this.innerHTML = generateRandomCode();
            });
            // 提交事件
            form.on('submit(demo-login)', function (data) {
                var field = data.field; // 获取表单字段值              
                // 获取文本框的值
                var inputValue = $('input[name="captcha"]').val();
                //获取p标签中的验证码值
                var captchaValue = document.getElementById('randomCode').innerHTML
                // 比较两者是否一致
                if (inputValue.toLowerCase() !== captchaValue.toLowerCase()) {
                    // 不一致时的处理，例如显示错误提示
                    alert('验证码不一致，请重新输入');
                    return false;
                }

               
                // 此处可执行 Ajax 等操作
                $.ajax({
                    url: 'http://localhost:5174/api/Users/Login',
                    type: 'Post',
                    data: JSON.stringify(field),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code > 0) {

                            layer.msg('登录成功！');
                            //存token
                            localStorage.setItem("token", res.token);
                           
                            //获取登录人真实姓名
                            localStorage.setItem("nickName", res.data.nickName);

                            //判断复选框是否被选中

                            if ($("[name=remeber]").prop('checked')) {

                                // 复选框被选中时的操作
                                sessionStorage.setItem('username', res.data.userName);
                              
                                sessionStorage.setItem('pwd', res.data.password);

                            } else {

                                // 复选框未被选中时的操作
                                sessionStorage.removeItem('username')
                                sessionStorage.removeItem('pwd')
                            }

                            location.href = '/Survey/SurveyView'
                        }
                        else {
                            layer.msg('登录失败，账号或密码错误');
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error('请求出错：' + errorThrown);
                    }
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>

</body>
</html>
